<template>
  <div>
    <h3>
      <span>商品类型</span>
      <el-button type="primary" @click="adddrawer = true">添加分类</el-button>
    </h3>
    <hr />
    <el-table :data="typearr">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="分类名称" prop="cateName"></el-table-column>
      <el-table-column label="是否启用">
        <el-switch
          v-model="curstatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="openeditpage(scope)">操作</el-button>
          <el-button type="danger" @click="deltypebtn(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p>
      <el-pagination
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="curpage"
        :page-sizes="sizespage"
        :page-size="defaultsize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </p>
    <!-- 新的分类 -->
    <el-drawer title="我是标题" :visible.sync="adddrawer" :with-header="false">
      <div class="addtypepage">
        <h4>添加分类</h4>
        <p>
          <span>新的分类</span>
          <el-input v-model="newcateName"></el-input>
        </p>
        <p>
          <span style="margin-right: 20px">是否启用</span>
          <el-switch
            v-model="newstatus"
            active-text="开启"
            inactive-text="关闭"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </p>
        <el-button type="primary" @click="addtypebtn">添加</el-button>
      </div>
    </el-drawer>
    <!-- 编辑分类 -->
    <el-drawer title="我是标题" :visible.sync="editdrawer" :with-header="false">
      <div class="edittypepage">
        <h4>修改分类</h4>
        <p>
          <span>新的类型</span>
          <el-input v-model="editcateName"></el-input>
        </p>
        <p>
          <span style="margin-right: 20px">当前是否启用</span>
          <el-switch
            v-model="editstatus"
            active-text="开启"
            inactive-text="关闭"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </p>
        <el-button type="primary" @click="edittypebtn">修改</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { gettype, addtype, deltype, edittype } from "@/apis/product";
export default {
  data() {
    return {
      // 关闭修改弹窗
      editdrawer: false,
      // 修改新的类型
      editcateName: "",
      editstatus: true,
      typeid: "",
      // 分页
      sizespage: [5, 10, 20, 50],
      defaultsize: 5,
      curpage: 1,
      total: 0,
      typearr: [],
      curstatus: true,
      // 关闭添加类型弹窗
      adddrawer: false,
      // 添加新的类型数据
      newcateName: "",
      newstatus: true,
    };
  },
  methods: {
    // 添加类型保存
    addtypebtn() {
      addtype({ cateName: this.newcateName, state: this.newstatus }).then(
        (res) => {
          if (res.data.code == 0) {
            this.$message({
              message: "恭喜你，添加类型成功",
              type: "success",
            });
            this.getalltype();
          } else {
            this.$message.error("添加类型失败，请刷新网页重新添加");
          }
        }
      );
    },
    // 获取所有的数据
    getalltype() {
      gettype({ currentPage: this.curpage, pageSize: this.defaultsize }).then(
        (res) => {
          this.total = res.data.total;
          this.typearr = res.data.data;
        }
      );
    },
    // 打开编辑页面并赋值
    openeditpage(val) {
      this.editdrawer = true;
      this.typeid = val.row.id;
      this.editcateName = val.row.cateName;
      this.editstatus = val.row.state == 1 ? true : false;
    },
    // 更改页面
    edittypebtn() {
      edittype({
        id: this.typeid,
        cateName: this.editcateName,
        state: this.editstatus,
      }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "恭喜你，修改分类成功",
            type: "success",
          });
          this.getalltype();
        } else {
          this.$message.error("修改分类失败，请刷新网页重新添加");
        }
      });
    },
    // 删除
    deltypebtn(val) {
      deltype({ id: val.row.id }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "恭喜你，添加类型成功",
            type: "success",
          });
          this.getalltype();
        } else {
          this.$message.error("添加类型失败，请刷新网页重新添加");
        }
      });
    },
    // 当更换当前页数量时，重新渲染数据
    SizeChange(newsize) {
      this.defaultsize = newsize;
      this.getalltype();
    },
    // 当更换页面时，重新渲染数据
    CurrentChange(newpage) {
      this.curpage = newpage;
      this.getalltype();
    },
  },
  // 页面加载渲染数据
  created() {
    this.getalltype();
  },
};
</script>

<style lang="less" scoped>
h3 {
  display: flex;
  align-items: center;
  padding: 20px;
  justify-content: space-between;
}
.addtypepage,
.edittypepage {
  display: flex;
  flex-direction: column;
  padding: 20px;
  h4 {
    padding: 20px;
    text-align: center;
  }
  p {
    margin: 20px 0;
  }
}
</style>